<template>
    <div class="contain">
        <div class="header">
           <p>新增/修改角色</p>
           <el-button class="link" type="primary">
                <router-link to="/system/roleList" style="color: #fff;">返回</router-link>
           </el-button>
       </div>
       <div class="main">
            <el-form :model="role" :rules="rules" ref="role" label-width="120px" class="">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="role.roleName" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDescribe">
                    <el-input type="textarea" v-model="role.roleDescribe" placeholder="请输入角色描述" :rows="5"></el-input>
                </el-form-item>
                <el-form-item label="角色权限" prop="roleList">
                   <div class="access-list">
                        <div  v-for="(item,index) in role.roleList" :key="item.id" class="access-item">
                            <template>   
                                <el-checkbox v-model="item.checkAll" :indeterminate="item.isIndeterminate" @change="roleChange(index)"  :label="item.id" :key="item.id">{{item.permissionName}}</el-checkbox>   
                                <el-checkbox-group v-model="role.checkedOrder" >     
                                    <el-checkbox v-for="(list,num) in item.childPermissions" @change="roleListChange(index,num)" :label="list.id" :key="list.id">{{list.permissionName}}</el-checkbox>   
                                </el-checkbox-group> 
                            </template>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="handleSave('role')">保存</el-button>
                    <el-button type="info" @click="backList">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return {
            id:'',
            role: {
                roleList:[],
                roleName:'',
                roleDescribe:'',
                checkedOrder:[], 
            },
            rules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                roleDescribe: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                roleList:[
                    { type: 'array', required: true, trigger: 'change' }
                ],
                checkedOrder:[
                    { type: 'array',  message: '请选择角色权限', required: true, trigger: 'change' }
                ]
            },
            
        }
    },
    mounted() {
        this.id = this.$router.currentRoute.query.id;
        if(this.id){
            this.getDetailById();
        }else{
            this.getList();
        }
    },
    methods: {
        backList:function(){
            this.$router.go(-1);
        },
        getDetailById:function(){
            let url = CONSTANT.URL.SYSTEM.GETROLEINFOBYID;
            let param = { roleId:this.id} ;
            common.requestAjax(url,param,null,(res)=>{
                //console.log(res);
                if(res.status == 200){
                    let data = res.data.bussData;
                    this.role.roleName = data.roleName;
                    this.role.roleDescribe = data.roleDescribe;
                    this.role.checkedOrder = data.permissionIds;
                    this.getList();
                }
            }) 
        },
        getList:function(){
            let url = CONSTANT.URL.SYSTEM.GETALLAPPPERMISSION;
            let data = {};
            let param = JSON.stringify(data);
            common.requestAjax(url,param,null,(res)=>{
                let data = res.data.bussData;
                data.forEach((item)=>{
                    let status = false,
                        num = 0;
                    item.childPermissions.map((list)=>{
                        if(this.role.checkedOrder.includes(list.id)){
                            status = true;
                            num++
                        }
                    })
                    item.checkAll = num === item.childPermissions.length?true:false;
                    item.isIndeterminate = num === item.childPermissions.length?false:status;
                })
                this.role.roleList = data;
            })
        }, 
        handleSave:function(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = CONSTANT.URL.SYSTEM.SAVEAPPROLE,
                    data,param;
                    if(this.role.checkedOrder.length){
                        this.role.checkedOrder.forEach((item)=>{
                            item = parseInt(item)
                        })
                    }else{
                        this.role.checkedOrder = []
                    }
                    param = {
                        id:this.id?this.id:'',
                        roleName:this.role.roleName,
                        roleDescribe:this.role.roleDescribe,
                        permissionIds:this.role.checkedOrder
                    }
                    common.requestAjax(url,param,null,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                type: 'success',
                                message: '保存成功！'
                            });
                            setTimeout(()=>{
                                // this.$router.go(-1);
                                this.$router.push({ path: '/system/roleList' }) 
                            },500)
                        }else{
                            this.$message({
                                type: 'warning',
                                message: res.msg
                            }); 
                        }
                    }) 
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        roleChange:function(index){
            console.log(event)
            let arr = this.role.roleList[index].childPermissions,
                id = this.role.roleList[index].id;
                this.role.roleList[index].isIndeterminate = false;
                arr.map((item)=>{
                    if(event.target.checked){
                        if(!this.role.checkedOrder.includes(item.id)){
                            this.role.checkedOrder.push(item.id)
                        }
                        if(this.role.checkedOrder.includes(id)) return;
                        this.role.checkedOrder.push(id)
                    }else{
                        this.role.checkedOrder.map((list,index)=>{
                            if( list == item.id){
                                this.role.checkedOrder.splice(index,1)
                            }
                        })
                        this.role.checkedOrder.map((list,index)=>{
                            if( list ==id){
                                this.role.checkedOrder.splice(index,1)
                            }
                        })
                    }
                })
        },
        roleListChange:function(index,num){
            console.log(event.target.checked)
            let objArr = this.role.roleList[index].childPermissions,
                 obj = objArr[num];
                this.role.checkedOrder.find((item,index)=>{
                    if(event.target.checked){
                        if(this.role.checkedOrder.includes(obj.id)) return;
                        this.role.checkedOrder.push(obj.id)
                    }else{
                        if(!this.role.checkedOrder.includes(obj.id)) return;
                         this.role.checkedOrder.splice(index,1)
                    }
                })
                let checkNum = 0,
                    id = this.role.roleList[index].id;
                objArr.map((item)=>{
                    if(this.role.checkedOrder.includes(item.id)){
                        checkNum++
                    }
                })
                
                if(checkNum>0&&checkNum<objArr.length){
                    this.role.roleList[index].isIndeterminate = true
                }else if(checkNum==0||checkNum == objArr.length){
                    this.role.roleList[index].isIndeterminate = false
                }
                
                if(checkNum == 0){
                    this.role.roleList[index].checkAll = false
                }else if(checkNum == objArr.length){
                    this.role.roleList[index].checkAll = true
                }
                  
                if(checkNum){
                    if(this.role.checkedOrder.includes(id)) return;
                    this.role.checkedOrder.push(id)
                }else{
                    this.role.checkedOrder.find((item,index)=>{
                        if(item == id){
                            this.role.checkedOrder.splice(index,1)
                        }
                    })
                }


        }
    },
    
}
</script>

<style lang="scss" scoped>
    .contain {
        .header{
            height: 36px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right ;
            }
        }
        .main {
            width:80%;
            margin: 20px auto;
            clear: both;
            .el-checkbox-group{ margin-left: 30px;}
            .el-input,.el-textarea {
                width: 35%;
            }
        }
    }
</style>
